import Vue from 'vue'

// 相当于之前的base.css 初始化样式
// CSS重置的现代替代方案
import 'normalize.css/normalize.css'

// 我们项目使用的是ElementUI组件库
/*
  1) 完整引入
     把组件库中的所有组件全部拿入到项目
     优点: 后续要用什么组件, 直接使用, 不需要额外引入
     缺点: 打包时项目体积比较大
  2) 按需引入
     项目中要用到什么组件, 引入对应的组件
     优点: 打包时项目体积比较小, 体验好
     缺点: 要用什么组件需要额外引入

  如何选择?
  一般后台管理系统基本都是完整引入, 首先, 组件库中的组件基本大多数都会用到; 其次, 后台管理系统基本都是内部员工使用, 优先考虑的是功能而非体验;

  一些移动端的项目, 或者面向用户的网站项目, 就需要采用按需加载
*/
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // 导入组件库中的英文语言包

/*
  使用vue-cli初始化的项目
  @是src目录的别名, 用于简写路径的
*/
// 导入项目中的全局样式
import '@/styles/index.scss'

import App from './App'
import store from './store'
import router from './router'
// import http from './utils/request'

/*
  直接引入执行的
*/
// 全局引入项目中会用到的svg图标
import '@/icons'
// 全局引入权限控制文件
import '@/permission'

// 全局使用ElementUI, 并设置语言模式为 英文
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)
// console.log(ElementUI.install + '', '99999')

// 阻止启动生产消息提示
Vue.config.productionTip = false

// 打印当前的环境变量
// console.log('----==---', process.env, process.env.VUE_APP_BASE_API)
// console.log('----==---', process.env, process.env.port)

// Vue是一个构造函数, 所有的.vue组件都是它的实例
// 实例要共享方法 -> 把方法添加到原型上
// 实例调用方法: this.$http
// Vue.prototype.$http = http

// 全局注册自定义指令
// 使用指令: v-on 或 v-if..., 注册时省略v-
// Vue.directive('imgerror', {
//   // 该钩子函数什么时候会触发?
//   // 在绑定该指令的元素被插入DOM的时候
//   inserted(el, binding) {
//     // console.log(el, binding.value, '55555')
//     // 做一层判断: 只有当图片加载失败的时候处理
//     el.onerror = function() {
//       el.src = binding.value
//     }
//   }
// })

// 引入全局注册的指令
// 操作1------------
// import './directives' // 存在问题: 一次性导入了所有注册的全局组件
// import { imgerror, color } from './directives'
// Vue.directive('imgerror', imgerror)
// Vue.directive('color', color)

// 操作2------------
// 用for..in..方式, 简洁但是对象身上的方法不多
// import * as directives from './directives'
// for (const key in directives) {
//   Vue.directive(key, directives[key])
// }

// 操作3-------------
// 用Object.keys()方式, 数组上绑定了很多方法, 后期的拓展性更大
import * as directives from './directives'
// console.log(Object.keys(directives))
// console.log(Object.values(directives))

Object.keys(directives).forEach((key) => {
  Vue.directive(key, directives[key])
})

// 引入全局注册的组件
// import PageTools from '@/components/PageTools'
// Vue.component('page-tools', PageTools)

// import '@/components'

import componentUI from '@/components'
Vue.use(componentUI)

// 注册全局过滤器
// import dayjs from 'dayjs'
// Vue.filter('formatDate', (value, str = 'YYYY-MM-DD') => {
//   return dayjs(value).format(str)
// })
import * as filters from './filters'
Object.keys(filters).forEach((key) => {
  Vue.filter(key, filters[key])
})

// 引入打印插件
import Print from 'vue-print-nb'
Vue.use(Print) // 会全局生成v-print指令

// 将App.vue根组件渲染到指定的挂载点(非常重要)
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

